<!DOCTYPE html>
<html>
<head>
<title>管理中心首页</title>
#include("../include/common.html")
<style type="text/css">
.bg-green, .callout.callout-success, .alert-success, .label-success, .modal-success .modal-body {
    background-color: #00a65a !important;
}
.bg-aqua, .callout.callout-info, .alert-info, .label-info, .modal-info .modal-body {
    background-color: #00c0ef !important;
}
.bg-yellow, .callout.callout-warning, .alert-warning, .label-warning, .modal-warning .modal-body {
    background-color: #f39c12 !important;
}
.bg-red, .callout.callout-danger, .alert-danger, .alert-error, .label-danger, .modal-danger .modal-body {
    background-color: #dd4b39 !important;
}
.small-box {
    border-radius: 2px;
    position: relative;
    display: block;
    margin-bottom: 20px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.small-box>.inner {
    padding: 10px;
}
.small-box h3 {
    font-size: 38px;
    font-weight: bold;
    margin: 0 0 10px 0;
    white-space: nowrap;
    padding: 0;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Source Sans Pro',sans-serif;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}
.small-box p {
    font-size: 15px;
}
p {
    margin: 0 0 10px;
}
.small-box>.small-box-footer {
    position: relative;
    text-align: center;
    padding: 3px 0;
    color: #fff;
    color: rgba(255,255,255,0.8);
    display: block;
    z-index: 10;
    background: rgba(0,0,0,0.1);
    text-decoration: none;
}
.bg-red, .bg-yellow, .bg-aqua, .bg-blue, .bg-light-blue, .bg-green, .bg-navy, .bg-teal, .bg-olive, .bg-lime, .bg-orange, .bg-fuchsia, .bg-purple, .bg-maroon, .bg-black, .bg-red-active, .bg-yellow-active, .bg-aqua-active, .bg-blue-active, .bg-light-blue-active, .bg-green-active, .bg-navy-active, .bg-teal-active, .bg-olive-active, .bg-lime-active, .bg-orange-active, .bg-fuchsia-active, .bg-purple-active, .bg-maroon-active, .bg-black-active, .callout.callout-danger, .callout.callout-warning, .callout.callout-info, .callout.callout-success, .alert-success, .alert-danger, .alert-error, .alert-warning, .alert-info, .label-danger, .label-info, .label-warning, .label-primary, .label-success, .modal-primary .modal-body, .modal-primary .modal-header, .modal-primary .modal-footer, .modal-warning .modal-body, .modal-warning .modal-header, .modal-warning .modal-footer, .modal-info .modal-body, .modal-info .modal-header, .modal-info .modal-footer, .modal-success .modal-body, .modal-success .modal-header, .modal-success .modal-footer, .modal-danger .modal-body, .modal-danger .modal-header, .modal-danger .modal-footer {
    color: #fff !important;
}
.small-box .icon {
    -webkit-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
    position: absolute;
    top: -2px;
    right: 10px;
    z-index: 0;
    font-size: 90px;
    color: rgba(0,0,0,0.15);
}
</style>
</head>
<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>管理中心首页</h5>
            </div>
                        <div class="ibox-content">
            	<!-- 数量显示 -->
                <div class="row">
	            <div class="col-lg-3 col-xs-6">
	              <!-- 内容 -->
	              <div class="small-box bg-aqua">
	               <div class="inner"><h3>#(daySaleAmount??"0.00")</h3><p>当日销售额</p></div>
	                <div class="icon">
	                  <i class="fa fa-clock-o"></i>
	                </div>
	                <!-- <a class="small-box-footer" href=";">更多 <i class="fa fa-arrow-circle-right"></i></a> -->
	              </div>
	            </div><!-- ./col -->
	            <div class="col-lg-3 col-xs-6">
	              <!-- 会员 -->
	              <div class="small-box bg-green">
	                <div class="inner"><h3>#(weekSaleAmount??"0.00")</h3><p>当周销售额</p></div>
	                <div class="icon">
	                  <i class="fa fa-clock-o"></i>
	                </div>
	                <!-- <a href=";" class="small-box-footer">更多 <i class="fa fa-arrow-circle-right"></i></a> -->
	              </div>
	            </div><!-- ./col -->
	            <div class="col-lg-3 col-xs-6">
	              <!-- 会员 -->
	              <div class="small-box bg-yellow">
	                <div class="inner"><h3>#(monthSaleAmount??"0.00")</h3><p>当月销售额</p></div>
	                <div class="icon">
	                  <i class="fa fa-clock-o"></i>
	                </div>
	                <!-- <a href=";" class="small-box-footer">更多 <i class="fa fa-arrow-circle-right"></i></a> -->
	              </div>
	            </div><!-- ./col -->
	            <div class="col-lg-3 col-xs-6">
	              <!-- 站点 -->
	              <div class="small-box bg-red">
	                <div class="inner"><h3>#(dayPendingShipmentOrderCount??"0")</h3><p>当日待发订单</p></div>
	                <div class="icon">
	                  <i class="fa fa-clock-o"></i>
	                </div>
	                <!-- <a href=";" class="small-box-footer">更多 <i class="fa fa-arrow-circle-right"></i></a> -->
	              </div>
	            </div><!-- ./col -->
	          </div>
            	
             <div class="row">
             	<section class="col-lg-6">
	            <div class="box">
	                <div class="box-header">
	                </div>
	                <div class="box-body" style="text-align:center; border-top:solid 1px #eee; overflow:auto;">
	                    <div id="chart1" style="height: 500px;"></div>
	                </div>
	             </div>
	             </section>
	             <section class="col-lg-6">
	            <div class="box">
	                <div class="box-header">
	                </div>
	                <div class="box-body" style="text-align:center; border-top:solid 1px #eee; overflow:auto;">
	                    <div id="chart2" style="height: 500px;"></div>
	                </div>
	             </div>
	             </section>
 			 </div>
            </div>
        </div>
    </div>
</body>
<!---->
<script type="text/javascript">
chart1();
chart2();
function chart1(){
	var dom = document.getElementById("chart1");
	var myChart = echarts.init(dom);
	option = {
	    title : {
	        text: '7天内订单统计',
	        subtext: ''
	    },
	    tooltip : {
	        trigger: 'axis'
	    },
	    legend: {
	        data:['订单数']
	    },
	    xAxis : [
	        {
	            type : 'category',
	            boundaryGap : false,
	            data : [#(orderTime)]
	        }
	    ],
	    yAxis : [
	        {
	            type : 'value'
	        }
	    ],
	    series : [
	        {
	            name:'订单数',
	            type:'line',
	            data:[#(orderValue)]
	        }
	    ]
	};
	if(option && typeof option === "object") {
		myChart.setOption(option, true);
	}
}
function chart2(){
	var dom = document.getElementById("chart2");
	var myChart = echarts.init(dom);
	option = {
	    title : {
	        text: '7天内产品统计',
	        subtext: ''
	    },
	    tooltip : {
	        trigger: 'axis'
	    },
	    legend: {
	        data:['产品数']
	    },
	    xAxis : [
	        {
	            type : 'category',
	            data : [#(productTime)]
	        }
	    ],
	    yAxis : [
	        {
	            type : 'value'
	        }
	    ],
	    series : [
	        {
	            name:'产品数',
	            type:'bar',
	            data:[#(productValue)]
	        }
	    ]
	};
	if(option && typeof option === "object") {
		myChart.setOption(option, true);
	}
}
</script>
</html>